<template>
  <div class="card info-box" v-if="loading">
    <div class="u-font-bold u-m-b-10 u-m-l-4 u-text-left u-font-14">平均/最大值（最近20场）</div>
    <van-row gutter="10">
      <van-col span="18">
        <RadarChart :recentMatches="recentMatches"></RadarChart>
      </van-col>
      <van-col span="6">
        <div class="u-flex-col u-row-between u-font-14" style="height:100%;">
          <div class="u-m-t-10">
            <div class="u-m-b-10">胜率</div>
            <van-tag type="primary">
              {{
                getWinAverageInList(recentMatches)
              }}
            </van-tag>
          </div>
          <div class="u-m-b-20">
            <div class="u-m-b-10">位置</div>
            <van-tag type="success">
              {{
                getLaneInList(recentMatches)
              }}
            </van-tag>
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-type-success">
              {{
                getAverageInListByKey(recentMatches, "kills")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'kills')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "kills") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'kills')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'kills')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">击杀</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-type-error">
              {{
                getAverageInListByKey(recentMatches, "deaths")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'deaths')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "deaths") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'deaths')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'deaths')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">死亡</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-main-color">
              {{
                getAverageInListByKey(recentMatches, "assists")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'assists')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "assists") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'assists')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'assists')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">助攻</span>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-content-color">
              {{
                getAverageInListByKey(recentMatches, "gold_per_min")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'gold_per_min')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "gold_per_min") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'gold_per_min')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'gold_per_min')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">每分钟金钱</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-content-color">
              {{
                getAverageInListByKey(recentMatches, "xp_per_min")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'xp_per_min')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "xp_per_min") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'xp_per_min')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'xp_per_min')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">每分钟经验</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-content-color">
              {{
                getAverageInListByKey(recentMatches, "last_hits")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'last_hits')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "last_hits") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'last_hits')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'last_hits')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">正补</span>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="10">
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-content-color">
              {{
                getAverageInListByKey(recentMatches, "hero_damage")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'hero_damage')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "hero_damage") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'hero_damage')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'hero_damage')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">英雄伤害</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-content-color">
              {{
                getAverageInListByKey(recentMatches, "hero_healing")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'hero_healing')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "hero_healing") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'hero_healing')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'hero_healing')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">英雄治疗</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="item u-flex-col">
          <div class="u-flex u-col-bottom u-row-center">
            <span class="u-font-20 u-m-r-4 u-content-color">
              {{
                getAverageInListByKey(recentMatches, "tower_damage")
              }}
            </span>
            <span
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'tower_damage')
                )
              "
              class="u-font-12 u-m-r-4 u-type-info"
            >{{ getMaxInListByKey(recentMatches, "tower_damage") }}</span>
            <van-icon
              size="20px"
              @click="
                handleToMatch(
                  getMaxMatchIdInListByKey(recentMatches, 'tower_damage')
                )
              "
              :name="getMaxHeroIdInListByKey(recentMatches, 'tower_damage')"
            />
          </div>
          <span class="u-m-t-8 u-font-12 u-type-info">防御塔伤害</span>
        </div>
      </van-col>
    </van-row>
  </div>

  <div class="card info-box u-flex u-row-center" style="height:439px" v-else>
    <van-loading />
  </div>
</template>
<script setup>
import RadarChart from "@/components/Echarts/RadarChart/index";
import { ref, computed, onBeforeMount, defineProps } from "vue";
import {
  getPlayerRecentMatches,
} from "@/api/player.js";
import { getMaxInListByKey, getAverageInListByKey } from "@/utils/index";
import {
  getMaxHeroIdInListByKey,
  getMaxMatchIdInListByKey,
  getLaneInList,
  getWinAverageInList,
} from "@/utils/dotaHelper";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
const router = useRouter();
const store = useStore()
const props = defineProps({
  accountId: {
    type: [String, Number]
  }
})
const recentMatches = computed(() => {
  return store.getters.recentMatches
})
const loading = ref(false);
const handleToMatch = (match_id) => {
  router.push({
    name: "Match",
    params: {
      match_id,
    },
  });
};
onBeforeMount(() => {
  if (recentMatches.value.length > 0) loading.value = true
  getPlayerRecentMatches(props.accountId).then(res => {
    store.commit('player/SET_RECENT_MATCHES', res)
    loading.value = true
  })
});
</script>
<style lang="scss" scoped>
.info-box {
  padding: 10px 6px;
}
.card {
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.item {
  background: #efefef;
  padding: 6px 4px;
  border-radius: 8px;
  margin-bottom: 10px;
}
</style>
